<template>
  <div class="driver">
    <div class="form">
      <el-form ref="form" :model="form" :rules="rule" label-width="auto" inline="true" size="mini">
        <el-form-item prop="name" label="模板名称：">
          <el-input v-model="form.name" clearable></el-input>
        </el-form-item>

        <el-form-item prop label>
          <el-button type="primary" size="mini" @click="search">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn">
      <el-button plain size="mini" type="primary" v-if="isAuth('addTemplate')" @click="addCar">模板上传</el-button>
      <el-button
        plain
        size="mini"
        type="primary"
        v-if="isAuth('editTemplate')"
        @click="updateCar"
      >编辑模板</el-button>
      <el-button plain size="mini" type="primary" v-if="isAuth('delTemplate')" @click="delCar">删除模板</el-button>
    </div>
    <div class="table" ref="inner">
      <el-table
        :data="tableData"
        border
        :height="maxHeight"
        :header-cell-style="{ textAlign: 'center' }"
        highlight-current-row
        @row-click="rowClick"
        @row-dblclick="dbrowClick"
      >
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column align="left" prop="cteName" label="模板名称" show-overflow-tooltip sortable></el-table-column>
        <el-table-column align="left" prop="created" label="创建时间" show-overflow-tooltip sortable></el-table-column>
        <el-table-column align="left" prop="creator" label="创建人" show-overflow-tooltip sortable></el-table-column>
        <el-table-column align="left" prop="edited" label="修改时间" show-overflow-tooltip sortable></el-table-column>
        <el-table-column align="left" prop="editor" label="修改人" show-overflow-tooltip sortable></el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
        ref="pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.pageSize"
        :layout="Pagination.layout"
        :total="Pagination.total"
      ></el-pagination>
    </div>
    <!-- 对话框 新增 模板 -->
    <el-dialog
      :title="name"
      :visible.sync="openDialog"
      v-if="openDialog"
      v-el-drag-dialog
      :before-close="close"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form
        :model="dialogForm"
        size="mini"
        :rules="dialogRule"
        ref="dialogForm"
        label-width="auto"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="cteName" label="模板名称：">
              <el-input v-model="dialogForm.cteName" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="cteFilePath" label="模板文件：">
              <el-upload
                class="upload-demo"
                accept=".docx"
                drag
                action
                limit="1"
                :http-request="httpRequest"
                :on-remove="removeFile"
                :file-list="fileList"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或
                  <em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">只能上传.docx文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">关闭</el-button>
        <el-button type="primary" @click="save" size="mini">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import isAuth from '@/mixins/buttonAuth'
import {
  findContractTemplateModelPage,
  updateContractTemplateModel,
  uploadText,
  addContractTemplateModel,
  delContractTemplateModel
} from '@/request/api'
export default {
  name: 'router.template',
  mixins: [paginationMixin, resizeMixin, isAuth],
  data() {
    return {
      form: {
        name: ''
      },
      add: true,
      maxHeight: -1,
      tableData: [],
      currentData: {},
      issuse: '',
      fileList: [],
      // 车辆对话框
      name: '',
      openDialog: false,
      dialogForm: {},
      dialogRule: {
        cteFilePath: [
          { required: true, message: '请上传模板文件', trigger: 'change' }
        ],
        cteName: [
          { required: true, message: '模板名称不能为空', trigger: 'change' }
        ]
      },
      //上传、查看图片对话框
      openUpload: false
    }
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
  },
  mounted() {
    this.refreshList()
  },
  methods: {
    updateCar() {
      if (Object.keys(this.currentData).length === 0) {
        this.$alert('请选择需要编辑的模板！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }

      this.openDialog = true
      this.add = false
      this.name = '合同模板编辑'
      this.dialogForm = this.currentData
      this.initfileList(this.currentData)
    },
    initfileList(data) {
      this.fileList = [{ name: data.cteFileName, url: '' }]
    },
    delCar() {
      if (Object.keys(this.currentData).length === 0) {
        this.$alert('请选择需要删除的模板！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确定要删除该模板吗？', '提示', {
        confirmButtonText: '确定'
      }).then(() => {
        delContractTemplateModel({ cteId: this.currentData.cteId }).then(
          res => {
            if (res.success === '1') {
              this.$message({
                type: 'success',
                message: '删除成功',
                showClose: true
              })
              this.close()
            }
          }
        )
      })
    },
    removeFile() {
      this.dialogForm.cteFileName = null
      this.dialogForm.cteFilePath = null
    },
    //查询
    search() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.refreshList()
        }
      })
    },
    //table表格数据
    getList(currentPage, pageSize, updateTotal) {
      findContractTemplateModelPage({
        cteName: this.form.name,
        currentPage,
        pageSize
      }).then(response => {
        this.tableData = response.data
        updateTotal(Number(response.total))
      })
    },
    //文件上传
    httpRequest({ file }) {
      uploadText(file).then(res => {
        this.dialogForm.cteFileName = res.data.ordfileName
        this.dialogForm.cteFilePath = res.data.url
        if (res.success == '1') {
          this.$alert('文件上传成功！', '提示', {
            confirmButtonText: '确定'
          })
        }
      })
    },
    //证件上传
    upload() {
      this.openUpload = true
      this.title = '上传证件'
    },

    //单击行
    rowClick(row) {
      this.currentData = Object.assign({}, row)
    },
    //保存
    save() {
      this.$refs.dialogForm.validate(valid => {
        if (valid) {
          if (this.add) {
            //新增
            addContractTemplateModel(this.dialogForm).then(res => {
              if (res.success === '1') {
                this.$message({
                  type: 'success',
                  message: '新增模板成功！',
                  showClose: true
                })
                this.close()
              }
            })
          } else {
            //编辑
            updateContractTemplateModel(this.dialogForm).then(res => {
              if (res.success === '1') {
                this.$message({
                  type: 'success',
                  message: '编辑模板成功！',
                  showClose: true
                })
                this.close()
              }
            })
          }
        }
      })
    },
    //合同模板上传
    addCar() {
      this.openDialog = true
      this.name = '合同模板上传'
      this.dialogForm = {}
      this.fileList = []
      this.add = true
    },
    //关闭车辆对话框
    close() {
      this.openDialog = false
      this.currentData = {}
      this.refreshList()
    }
  }
}
</script>
<style lang="scss" scoped>
.pic {
  height: 500px;
  overflow: auto;
  img {
    width: 100%;
  }
}
.driver {
  width: 100%;
  height: 100%;
  padding: 15px 15px 12px;
  display: flex;
  flex-direction: column;
  .form {
    height: 30px;
  }
  .btn {
    height: 50px;
    line-height: 50px;
  }
  .name {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }
  .table {
    flex: 1;
  }
  .pages {
    height: 30px;
  }

  .box {
    //上传对话框
    overflow: hidden;
    height: 200px;
    .selectItem {
      // float:right;
      display: inline-block;
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
    .upload {
      // float:right;
      display: inline-block;
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
    }
  }
}
</style>
